<template>
  <div>
    <div class="cation_box">
      <template>
        <el-tabs v-model="activeName">
          <el-tab-pane label="全部" name="1">
              <span slot="label"> 全部
               <span class="tab-badge">{{all}}</span>
             </span>
          </el-tab-pane>
          <el-tab-pane label="待审核" name="2">
              <span slot="label"> 待审核
               <span class="tab-badge">{{toAudit}}</span>
             </span>
          </el-tab-pane>
          <el-tab-pane label="认证通过" name="3">
              <span slot="label"> 认证通过
               <span class="tab-badge">{{passAudit}}</span>
             </span>
          </el-tab-pane>
          <el-tab-pane label="认证未通过" name="4">
              <span slot="label"> 认证未通过
               <span class="tab-badge">{{noPassAudit}}</span>
             </span>
          </el-tab-pane>
        </el-tabs>
      </template>
      <el-table
        border
        size="mini"
        :header-cell-style="{background:'#f8f8f8',borderRight:0, color:'#515a6e'}"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="runname" label="跑团名称" width="180"></el-table-column>
        <el-table-column prop="contacts" label="团长" width="180"></el-table-column>
        <el-table-column prop="phone" label="联系方式"></el-table-column>
        <el-table-column prop="state" label="认证状态">
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.state == 1">已认证</el-tag>
            <el-tag size="mini" v-else-if="scope.row.state == 2" type="warning">待审核</el-tag>
            <el-tag size="mini" v-else type="danger">未通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="authentication" label="认证类型">
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.authentication == 1">组织认证</el-tag>
            <el-tag size="mini" v-else-if="scope.row.authentication == 2" type="warning">个人认证</el-tag>
            <el-tag size="mini" v-else-if="scope.row.authentication == 3" type="success">企业认证</el-tag>
            <!-- <el-tag v-else type="danger">未通过</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.state == 2" icon="el-icon-view" @click="look(scope.row)">审核</el-button>
            <el-button size="mini" v-else icon="el-icon-view" @click="look(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          background
          small
          :current-page="current_page"
          :page-size="per_page"
          layout="total, prev, pager, next, jumper"
          :total="30"
        ></el-pagination>
      </div>
    </div>
    <el-dialog class="datum" title="认证资料" :visible.sync="dialogDatum">
      <el-form :model="form" label-position="left">
        <el-row>
          <el-col :span="12">
            <el-form-item label="认证状态：">
              <template>
                <el-tag size="mini" v-if="form.state == 1" type="success">已认证</el-tag>
                <el-tag size="mini" v-else-if="form.state == 2" type="warning">待审核</el-tag>
                <el-tag size="mini" v-else type="danger">未通过</el-tag>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="认证类型：">
              <template>
                <el-tag size="mini" v-if="form.authentication == 1">组织认证</el-tag>
                <el-tag size="mini" v-else-if="form.authentication == 2" type="warning">个人认证</el-tag>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名：">
              <span>{{form.name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号：">
              <span>{{form.idCard}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱：">
              <span>{{form.email}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式：">
              <span>{{form.phone}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="认证理由：">
              <span>{{form.reason}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证正面照片：">
              <el-image style="width: 100px;" :src="form.picO"></el-image>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证反面照片：">
              <el-image style="width: 100px;" :src="form.picT"></el-image>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手持身份证照片：">
              <el-image style="width: 100px;" :src="form.picTH"></el-image>
            </el-form-item>
          </el-col>
          <el-form-item label="拒绝理由：" v-if="form.state != 1">
            <el-input
              type="textarea"
              v-model="form.refuseReason"
              :rows="2"
              placeholder="请输入拒绝理由,通过可以不填"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" v-if="form.state == 2" class="dialog-footer">
        <el-button type="danger" size="small" @click="refuse">拒绝</el-button>
        <el-button type="primary" size="small" @click="pass">通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      all:12,
      toAudit:21,
      passAudit:5,
      noPassAudit:5,
      current_page: 1,
      per_page: 10,
      form: "",
      dialogDatum: false,
      activeName: "1",
      tableData: [
        {
          runname: "多威跑团",
          contacts: "wl",
          state: 1,
          phone: "165853321",
          authentication: 1,
          name: "wf",
          idCard: "34165477455741452",
          email: "1101661693@qq.com",
          resason: "沙发哦积分",
          refuseReason: "",
          picO:'../../assets/img/brand01.png',
          picT: '../../assets/img/brand02.png',
          picTH: '../../assets/img/brand03.png'
        },
         {
          runname: "多威跑团",
          contacts: "wl",
          state: 2,
          phone: "165853321",
          authentication: 2,
          name: "wf",
          idCard: "34165477455741452",
          email: "1101661693@qq.com",
          resason: "沙发哦积分",
          refuseReason: "",
          picO:'../../assets/img/brand01.png',
          picT: '../../assets/img/brand02.png',
          picTH: '../../assets/img/brand03.png'
        }, 
        {
          runname: "多威跑团",
          contacts: "wl",
          state: 3,
          phone: "165853321",
          authentication: 3,
          name: "wf",
          idCard: "34165477455741452",
          email: "1101661693@qq.com",
          resason: "沙发哦积分",
          refuseReason: "",
          picO:'../../assets/img/brand01.png',
          picT: '../../assets/img/brand02.png',
          picTH: '../../assets/img/brand03.png'
        },
      ]
    };
  },
  methods: {
    look(content) {
      this.dialogDatum = true;
      console.log(content);
      this.form = content;
    },
    // 通过审核
    pass() {
      this.dialogDatum = false;
    },
    refuse() {
      if (!this.form.refuseReason) {
        this.$message.error("请输入拒绝理由");
        return false;
      }
      this.dialogDatum = false;
    }
  }
};
</script>

<style scoped>
@import url("../../assets/css/team/cation/cation.css");
</style>